<!DOCTYPE>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 800px;
      }

      #map {
        width: 800px;
        height: 400px;
      }

      #actions {
        list-style: none;
        padding: 0;
      }

      #inline-actions {
        padding-top: 10px;
      }

      .item {
        margin-left: 20px;
      }
    </style>

    <script src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
    <script src="../src/data.json" type="text/javascript"></script>
    <script type="text/javascript">
      var script = '<script type="text/javascript" src="../src/markerclusterer';
      if (document.location.search.indexOf('packed') !== -1) {
        script += '_packed';
      }
      script += '.js"><' + '/script>';
      document.write(script);
    </script>

    <script type="text/javascript">
      var styles = [[{
        url: '../images/people35.png',
        width: 35,
        height: 35,
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/people45.png',
        width: 45,
        height: 45,
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/people55.png',
        width: 55,
        height: 55,
        textColor: '#ffffff',
        textSize: 12
      }], [{
        url: '../images/conv30.png',
        width: 30,
        height: 27,
        anchorText: [-3, 0],
        anchorIcon: [27, 28],
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/conv40.png',
        width: 40,
        height: 36,
        anchorText: [-4, 0],
        anchorIcon: [36, 37],
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/conv50.png',
        width: 50,
        height: 45,
        anchorText: [-5, 0],
        anchorIcon: [45, 46],
        textColor: '#0000ff',
        textSize: 12
      }], [{
        url: '../images/heart30.png',
        width: 30,
        height: 26,
        anchorIcon: [26, 15],
        textColor: '#ff00ff',
        textSize: 10
      }, {
        url: '../images/heart40.png',
        width: 40,
        height: 35,
        anchorIcon: [35, 20],
        textColor: '#ff0000',
        textSize: 11
      }, {
        url: '../images/heart50.png',
        width: 50,
        height: 44,
        anchorIcon: [44, 25],
        textSize: 12
      }]];

      var markerClusterer = null;
      var map = null;
      var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
          'chco=FFFFFF,008CFF,000000&ext=.png';

      google.maps.event.addDomListener(window, 'load', initialize);

      function refreshMap() {
        if (markerClusterer) {
          markerClusterer.clearMarkers();
        }

        var markers = [];

        var markerImage = new google.maps.MarkerImage(imageUrl,
          new google.maps.Size(24, 32));

        for (var i = 0; i < 1000; ++i) {
          var latLng = new google.maps.LatLng(data.photos[i].latitude,
              data.photos[i].longitude)
          var marker = new google.maps.Marker({
           position: latLng,
           icon: markerImage
          });
          markers.push(marker);
        }

        var zoom = parseInt(document.getElementById('zoom').value, 10);
        var size = parseInt(document.getElementById('size').value, 10);
        var style = parseInt(document.getElementById('style').value, 10);
        zoom = zoom == -1 ? null : zoom;
        size = size == -1 ? null : size;
        style = style == -1 ? null: style;

        markerClusterer = new MarkerClusterer(map, markers, {
          maxZoom: zoom,
          gridSize: size,
          styles: styles[style]
        });
      }

      function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(39.91, 116.38),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

        var refresh = document.getElementById('refresh');
        google.maps.event.addDomListener(refresh, 'click', refreshMap);

        var clear = document.getElementById('clear');
        google.maps.event.addDomListener(clear, 'click', clearClusters);

        refreshMap();
      }

      function clearClusters(e) {
        e.preventDefault();
        e.stopPropagation();
        markerClusterer.clearMarkers();
      }

    </script>
  </head>
  <body>
    <h3>An example of MarkerClustererPlus</h3>
    <p>
      <a href="?packed">Packed</a> |
      <a href="?">Standard</a> version of the script.
    </p>
    <div id="map-container">
      <div id="map"></div>
    </div>
    <div id="inline-actions">
      <span>Max zoom level:
        <select id="zoom">
          <option value="-1">Default</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
        </select>
      </span>
      <span class="item">Cluster size:
        <select id="size">
          <option value="-1">Default</option>
          <option value="40">40</option>
          <option value="50">50</option>
          <option value="70">70</option>
          <option value="80">80</option>
        </select>
      </span>
      <span class="item">Cluster style:
        <select id="style">
          <option value="-1">Default</option>
          <option value="0">People</option>
          <option value="1">Conversation</option>
          <option value="2">Heart</option>
        </select>
      </span>
      <input id="refresh" type="button" value="Refresh Map" class="item"/>
      <a href="#" id="clear">Clear</a>
    </div>
  </body>
</html>
